<template>
  <basic-container>
    <avue-crud ref="crud"
               :option="option"
               v-model:page="page"
               :table-loading="loading"
               @on-load="onLoad"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @refresh-change="refreshChange"
               @search-reset="searchChange"
               @search-change="searchChange"
               v-model="form"
               :data="data">
      <template #statue="{row}">
        <el-tag :type="row.statue == 1? 'success': 'danger'">{{row.$statue}}</el-tag>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script >
import {
  getSystemAdminList,
  addSystemAdmin,
  updateSystemAdmin,
  deleteSystemAdmin
} from '/@/api/system'
import {onMounted, reactive, ref, toRefs} from "vue";
import useCurrentInstance from "/@/utils/useCurrentInstance";
import {selectListDept} from "../../api/systemDept";
import {getSelectRoleList} from "../../api/systemRole";
export default {
  name: "systemAdmin",

  setup(props){
    const { proxy } = useCurrentInstance();

    const option = ref({
      searchMenuSpan: 6,
      tip: false,
      border: true,
      index: true,
      indexLabel: '序号',
      indexWidth: 80,
      viewBtn: false,
      selection: true,
      addBtn:true,
      searchLabelWidth:100,
      excelBtn:false,
      labelWidth:100,
      align: 'center',
      column: [
        {
          label: '用户编码',
          prop: "code",
          width: 150,search: true,
          rules: [{
            required: true,
            message: '请输入用户编码',
            trigger: 'blur'
          }]
        },
        {
          label: '用户名称',
          prop: "realName", search: true,
          width: 150,
          rules: [{
            required: true,
            message: '请输入用户名称',
            trigger: 'blur'
          }]
        },
        {
          label: '部门',
          prop: "deptId", search: true,
          width: 150,
          type: 'select',
          rules: [{
            required: true,
            message: '请选择部门',
            trigger: 'change'
          }]
        },
        {
          label: '账号',
          prop: "account", min: 6,max: 16,
          width: 150,
          rules: [{
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }, {
            min: 6,
            max: 16,
            message: '长度在6~16个字符',
            trigger: 'blur'
          }]
        },
        {
          label: '手机',
          prop: "phone",
          width: 150,
        },

        {
          label: '密码',
          prop: "pwd", hide: true,
          width: 150,editDisplay: false,
          type: 'password', min: 6,max: 16,
          rules: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }, {
            min: 6,
            max: 16,
            message: '长度在6~16个字符',
            trigger: 'blur'
          }
          ]

        },
        {
          label: "确认密码",
          prop: "epwd",
          hide: true,editDisplay: false,
          type: 'password',
          min: 6,max: 16,
          rules: [
            {
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              validator: (rule, value, callback) => {
                if (value === '') {
                  callback(new Error('请再次输入密码'));
                } else if (value !== form.value.pwd) {
                  callback(new Error('两次输入密码不一致!'));
                } else {
                  callback();
                }
              },
              trigger: 'blur'
            },
            {
              min: 6,
              max: 16,
              message: '长度在6~16个字符',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '状态',
          prop: "statue",search: true,
          width: 150,
          type: 'radio',
          dicData: [{
            label: '正常',
            value: 1
          }, {
            label: '禁用',
            value: 2
          }],
          dataType: 'number',
          value: 1,
        },
        {
          label: '权限',
          prop: "role",
          type: 'select',
          multiple: true,
          minWidth: 150,
          rules: [{
            required: true,
            message: '请选择权限',
            trigger: 'change'
          }]
        },
      ]
    });
    const loading = ref(true);
    const data = ref([]);
    const crud = ref();
    const selectionList = ref([]);
    const queryParams = ref({});
    const form = ref({});
    const page = ref({
      pageSize: 10,
      currentPage: 1,
      total: 0

    })
    const onLoad = (pages, params = {}) => {
      loading.value = true;
      getSystemAdminList(Object.assign({ page: pages.currentPage,
        limit: pages.pageSize,},params, queryParams.value)).then(res => {
        const resData =  res.data;
        page.value.total = resData.total;
        data.value = resData.list;
        loading.value = false;
        selectionClear();
      })
    }
    const selectionClear = () => {
      selectionList.value = [];
    }
    const rowSave = (row, done, loading) => {
      addSystemAdmin(row).then(() => {
        done();
        onLoad(page.value);
        proxy.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });
    }
    const rowUpdate = (row, index, done, loading) => {
      updateSystemAdmin(row).then(() => {
        done();
        onLoad(page.value);
        proxy.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });
    }
    const rowDel = (row) => {
      proxy.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            return deleteSystemAdmin(row);
          })
          .then(() => {
            onLoad(page.value);
            proxy.$message({
              type: "success",
              message: "操作成功!"
            });
          });
    }
    const refreshChange = () => {
      onLoad(page.value, queryParams.value);
    }
    const searchChange = (params, done) => {
      page.currentPage = 1;
      onLoad(page.value, params);
      done();
    }
    onMounted(() => {
      getDeptList();
      getRoleList();
    })
    const getDeptList = () => {
      selectListDept().then(res => {
        option.value.column[2].dicData = res.data || [];
      })
    }
    const getRoleList = () => {
      getSelectRoleList().then(res => {
        option.value.column[8].dicData = res.data || [];
      })
    }


    return {
      option,
      loading,
      data,
      page,
      form,
      queryParams,
      onLoad,
      rowSave,
      rowUpdate,
      rowDel,
      refreshChange,
      searchChange
    }
  }
}
</script>
